<template>
  <view class="teacher-products-container">
    <navbar title="挂载课程"></navbar>
    <ProductListItem :product="product" v-for="product in products" :key="product.id"
                     @toDetail="handleClickDetail"></ProductListItem>
    <view class="empty-wrapper" v-if="!products.length">
      <image src="http://down.qwdata.vip/app_icon/1689063514563" class="empty-icon"></image>
      <view>没有可挂载的课程</view>
    </view>
  </view>
</template>

<script>
import Navbar from "@/components/navbar.vue";
import {mapGetters} from 'vuex'
import ProductListItem from "../home/ProductListItem.vue";
import fanzhishiApi from "@/fanzhishiApi";

export default {
  components: {
    Navbar,
    ProductListItem
  },
  computed: {
    ...mapGetters(['mine'])
  },
  onLoad({appId}) {
    console.log('fanzhishiAccountId', appId)
    this.appId = appId
    this.init()
  },
  data() {
    return {
      teachers: [],
      products: [],
      appId: null
    }
  },
  methods: {
    async init() {
      const res = await fanzhishiApi.mountProducts(this.appId)
      this.teachers = res.data.data.list
      this.products = res.data.data.products
    },
    handleClickDetail(productId) {
      const itemList = []

      this.teachers.map(teacher => {
        itemList.push(teacher.nickname)
      })


      uni.showActionSheet({
        itemList: itemList,
        success: (res)=> {
          this.toDetail(productId, this.teachers[res.tapIndex].id)
        },
        fail: function (res) {
          console.log(res.errMsg);
        }
      });
    },

    toDetail(productId, teacherId) {
      uni.navigateTo({
        url: '/pages/product_detail/product_detail?course_id=' + productId + '&mounted_teacher_id=' + teacherId
      });
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #f8f8f8;
}
.empty-wrapper {
  display: flex;
  flex-direction: column;
  margin-top: 200rpx;
  align-items: center;
  color: #999;

  .empty-icon {
    width: 270rpx;
    height: 186rpx;
    margin-right: 80rpx;
  }
}

.teacher-products-container {
  .teacher-container {
    min-height: 140rpx;
    margin: 30rpx;
    border-radius: 16rpx;
    position: relative;
    padding: 1px;
    overflow: hidden;
    display: flex;
    background-color: #fff;

    .info {
      margin-left: 36rpx;
      flex: 1;

      .gua-btn1 {
        background-color: #3177fd;
        color: #fff;
        height: 56rpx;
        width: 178rpx;
        font-size: 13px;
        border-radius: 30rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 30rpx;
        margin-top: 30rpx;
      }
    }

    .avatar {
      width: 100rpx;
      height: 100rpx;
      background-color: #fff;
      border-radius: 86rpx;
      margin-right: 30rpx;
      border: 2px solid #fff;
      margin-top: 30rpx;
      margin-bottom: 30rpx;
    }

    .title {
      font-size: 15px;
      color: #243139;
      font-weight: bold;
      margin-bottom: 6rpx;
      margin-top: 40rpx;
    }

    .desc {
      color: #A7A8B4;
      font-size: 12px;
      margin-bottom: 30rpx;
    }
  }
}

</style>
